import type { ComponentCategory } from '@/types/component'

export const componentCategories: ComponentCategory[] = [
  {
    id: 'basic',
    name: '基础组件',
    components: [
      {
        type: 'button',
        name: '按钮',
        icon: '🔘',
        defaultProps: {
          text: '按钮',
          type: 'primary',
          size: 'medium',
          disabled: false
        },
        propConfigs: {
          text: {
            type: 'string',
            label: '按钮文本',
            placeholder: '请输入按钮文本'
          },
          type: {
            type: 'select',
            label: '按钮类型',
            options: [
              { label: '主按钮', value: 'primary' },
              { label: '默认按钮', value: 'default' },
              { label: '虚线按钮', value: 'dashed' },
              { label: '文字按钮', value: 'text' },
              { label: '链接按钮', value: 'link' }
            ]
          },
          size: {
            type: 'select',
            label: '按钮尺寸',
            options: [
              { label: '大号', value: 'large' },
              { label: '中号', value: 'middle' },
              { label: '小号', value: 'small' }
            ]
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          }
        },
        defaultStyle: {
          width: '80px',
          height: '32px'
        },
        description: '可点击的按钮组件'
      },
      {
        type: 'link',
        name: '链接',
        icon: '🔗',
        defaultProps: {
          text: '点击跳转',
          href: '#',
          target: '_self',
          color: '#1890ff'
        },
        propConfigs: {
          text: {
            type: 'string',
            label: '链接文本',
            placeholder: '请输入链接文本'
          },
          href: {
            type: 'url',
            label: '跳转地址',
            placeholder: '请输入URL'
          },
          target: {
            type: 'select',
            label: '打开方式',
            options: [
              { label: '当前窗口', value: '_self' },
              { label: '新窗口', value: '_blank' }
            ]
          },
          color: {
            type: 'color',
            label: '文本颜色'
          }
        },
        defaultStyle: {
          display: 'inline-block'
        },
        description: '可点击的链接'
      },
      {
        type: 'icon',
        name: '图标',
        icon: '⭐',
        defaultProps: {
          name: 'star',
          size: '16px',
          color: '#000'
        },
        propConfigs: {
          name: {
            type: 'string',
            label: '图标名称',
            placeholder: '请输入图标名称'
          },
          size: {
            type: 'string',
            label: '图标大小',
            placeholder: '例如: 16px'
          },
          color: {
            type: 'color',
            label: '图标颜色'
          }
        },
        defaultStyle: {
          display: 'inline-block'
        },
        description: '显示图标'
      },
      {
        type: 'text',
        name: '文本',
        icon: '🔤',
        defaultProps: {
          content: '这是一段文本',
          fontSize: '14px',
          color: '#000',
          fontWeight: 'normal',
          textAlign: 'left'
        },
        propConfigs: {
          content: {
            type: 'textarea',
            label: '文本内容',
            placeholder: '请输入文本内容',
            rows: 3
          },
          fontSize: {
            type: 'string',
            label: '字体大小',
            placeholder: '例如: 14px'
          },
          color: {
            type: 'color',
            label: '文本颜色'
          },
          fontWeight: {
            type: 'select',
            label: '字体粗细',
            options: [
              { label: '正常', value: 'normal' },
              { label: '加粗', value: 'bold' },
              { label: '细体', value: 'lighter' }
            ]
          },
          textAlign: {
            type: 'select',
            label: '文本对齐',
            options: [
              { label: '左对齐', value: 'left' },
              { label: '居中', value: 'center' },
              { label: '右对齐', value: 'right' }
            ]
          }
        },
        defaultStyle: {
          width: '200px',
          padding: '8px'
        },
        description: '显示文本内容'
      },
      {
        type: 'label',
        name: '标签',
        icon: '🏷️',
        defaultProps: {
          text: '标签文本',
          color: '#000',
          fontSize: '14px'
        },
        propConfigs: {
          text: {
            type: 'string',
            label: '文本内容',
            placeholder: '请输入文本内容'
          },
          color: {
            type: 'color',
            label: '文本颜色'
          },
          fontSize: {
            type: 'string',
            label: '字体大小',
            placeholder: '例如: 14px'
          }
        },
        defaultStyle: {
          display: 'inline-block'
        },
        description: '显示标签'
      },
      {
        type: 'image',
        name: '图片',
        icon: '🖼️',
        defaultProps: {
          src: 'https://tailwindcss.com/_next/static/media/3d-transforms.ebde7a6a.jpeg',
          alt: '图片',
          fit: 'cover'
        },
        propConfigs: {
          src: {
            type: 'url',
            label: '图片地址',
            placeholder: '请输入图片URL'
          },
          alt: {
            type: 'string',
            label: '替代文本',
            placeholder: '图片描述'
          },
          fit: {
            type: 'select',
            label: '适应方式',
            options: [
              { label: '覆盖', value: 'cover' },
              { label: '包含', value: 'contain' },
              { label: '填充', value: 'fill' },
              { label: '缩放', value: 'scale-down' }
            ]
          }
        },
        defaultStyle: {
          width: '150px',
          height: '100px'
        },
        description: '显示图片'
      }
    ]
  },
  {
    id: 'form',
    name: '表单输入类',
    components: [
      {
        type: 'input',
        name: '输入框',
        icon: '📝',
        defaultProps: {
          placeholder: '请输入内容',
          value: '',
          disabled: false,
          maxLength: 100
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          value: {
            type: 'string',
            label: '默认值',
            placeholder: '请输入默认值'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          maxLength: {
            type: 'number',
            label: '最大长度',
            min: 1,
            max: 1000
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '文本输入框'
      },
      {
        type: 'textarea',
        name: '多行文本框',
        icon: '📝',
        defaultProps: {
          placeholder: '请输入内容',
          value: '',
          rows: 4,
          maxLength: 500,
          disabled: false
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          value: {
            type: 'textarea',
            label: '默认值',
            placeholder: '请输入默认值',
            rows: 3
          },
          rows: {
            type: 'number',
            label: '显示行数',
            min: 2,
            max: 10
          },
          maxLength: {
            type: 'number',
            label: '最大长度',
            min: 1,
            max: 5000
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '80px'
        },
        description: '多行文本输入框'
      },
      {
        type: 'password',
        name: '密码输入框',
        icon: '🔒',
        defaultProps: {
          placeholder: '请输入密码',
          value: '',
          disabled: false,
          showPassword: true
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          value: {
            type: 'string',
            label: '默认值',
            placeholder: '请输入默认值'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          showPassword: {
            type: 'boolean',
            label: '允许显示密码'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '密码输入框'
      },
      {
        type: 'number-input',
        name: '数字输入框',
        icon: '🔢',
        defaultProps: {
          value: 0,
          min: 0,
          max: 100,
          step: 1,
          placeholder: '请输入数字'
        },
        propConfigs: {
          value: {
            type: 'number',
            label: '默认值'
          },
          min: {
            type: 'number',
            label: '最小值'
          },
          max: {
            type: 'number',
            label: '最大值'
          },
          step: {
            type: 'number',
            label: '步长',
            min: 0.1
          },
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '数字输入框'
      },
      {
        type: 'search',
        name: '搜索输入框',
        icon: '🔍',
        defaultProps: {
          placeholder: '请输入搜索内容',
          value: '',
          allowClear: true,
          enterButton: true,
          disabled: false
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          value: {
            type: 'string',
            label: '默认值',
            placeholder: '请输入默认值'
          },
          allowClear: {
            type: 'boolean',
            label: '显示清除按钮'
          },
          enterButton: {
            type: 'boolean',
            label: '显示搜索按钮'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '带搜索功能的输入框'
      }
    ]
  },
  {
    id: 'selection',
    name: '选择类组件',
    components: [
      {
        type: 'select',
        name: '下拉选择',
        icon: '📋',
        defaultProps: {
          placeholder: '请选择',
          value: '',
          options: [
            { label: '选项1', value: 'option1' },
            { label: '选项2', value: 'option2' },
            { label: '选项3', value: 'option3' }
          ],
          disabled: false
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          value: {
            type: 'string',
            label: '默认值',
            placeholder: '请输入默认选中值'
          },
          options: {
            type: 'options',
            label: '选项配置'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '下拉选择框'
      },
      {
        type: 'radio-group',
        name: '单选框组',
        icon: '⚪',
        defaultProps: {
          value: '',
          options: [
            { label: '选项1', value: 'option1' },
            { label: '选项2', value: 'option2' }
          ],
          direction: 'horizontal'
        },
        propConfigs: {
          value: {
            type: 'string',
            label: '默认值',
            placeholder: '请输入默认选中值'
          },
          options: {
            type: 'options',
            label: '选项配置'
          },
          direction: {
            type: 'select',
            label: '排列方向',
            options: [
              { label: '水平', value: 'horizontal' },
              { label: '垂直', value: 'vertical' }
            ]
          }
        },
        defaultStyle: {
          display: 'flex',
          gap: '8px'
        },
        description: '单选框组'
      },
      {
        type: 'checkbox-group',
        name: '多选框组',
        icon: '☑️',
        defaultProps: {
          value: [],
          options: [
            { label: '选项1', value: 'option1' },
            { label: '选项2', value: 'option2' }
          ],
          direction: 'horizontal'
        },
        propConfigs: {
          options: {
            type: 'options',
            label: '选项配置'
          },
          direction: {
            type: 'select',
            label: '排列方向',
            options: [
              { label: '水平', value: 'horizontal' },
              { label: '垂直', value: 'vertical' }
            ]
          }
        },
        defaultStyle: {
          display: 'flex',
          gap: '8px'
        },
        description: '多选框组'
      },
      {
        type: 'switch',
        name: '开关',
        icon: '🔘',
        defaultProps: {
          checked: false,
          disabled: false,
          size: 'default',
          checkedChildren: '开',
          unCheckedChildren: '关'
        },
        propConfigs: {
          checked: {
            type: 'boolean',
            label: '默认状态'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          size: {
            type: 'select',
            label: '开关大小',
            options: [
              { label: '小', value: 'small' },
              { label: '默认', value: 'default' }
            ]
          },
          checkedChildren: {
            type: 'string',
            label: '选中时文本',
            placeholder: '如: 开'
          },
          unCheckedChildren: {
            type: 'string',
            label: '未选中时文本',
            placeholder: '如: 关'
          }
        },
        defaultStyle: {
          width: '60px',
          height: '24px'
        },
        description: '开关切换组件'
      },
      {
        type: 'slider',
        name: '滑块',
        icon: '🎚️',
        defaultProps: {
          value: 50,
          min: 0,
          max: 100,
          step: 1,
          disabled: false,
          range: false
        },
        propConfigs: {
          value: {
            type: 'number',
            label: '默认值'
          },
          min: {
            type: 'number',
            label: '最小值'
          },
          max: {
            type: 'number',
            label: '最大值'
          },
          step: {
            type: 'number',
            label: '步长',
            min: 1
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          range: {
            type: 'boolean',
            label: '范围选择'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '滑块选择组件'
      },
      {
        type: 'rate',
        name: '评分',
        icon: '⭐',
        defaultProps: {
          value: 0,
          count: 5,
          allowHalf: false,
          disabled: false,
          allowClear: true
        },
        propConfigs: {
          value: {
            type: 'number',
            label: '默认分数',
            min: 0,
            max: 5
          },
          count: {
            type: 'number',
            label: '星星总数',
            min: 1,
            max: 10
          },
          allowHalf: {
            type: 'boolean',
            label: '允许半选'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          allowClear: {
            type: 'boolean',
            label: '允许清除'
          }
        },
        defaultStyle: {
          width: '150px',
          height: '32px'
        },
        description: '星级评分组件'
      }
    ]
  },
  {
    id: 'datetime',
    name: '日期时间类',
    components: [
      {
        type: 'date-picker',
        name: '日期选择器',
        icon: '📅',
        defaultProps: {
          value: null,
          placeholder: '请选择日期',
          format: 'YYYY-MM-DD',
          disabled: false,
          allowClear: true
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          format: {
            type: 'string',
            label: '日期格式',
            placeholder: '如: YYYY-MM-DD'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          allowClear: {
            type: 'boolean',
            label: '允许清除'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '日期选择器'
      },
      {
        type: 'time-picker',
        name: '时间选择器',
        icon: '🕕',
        defaultProps: {
          value: null,
          placeholder: '请选择时间',
          format: 'HH:mm:ss',
          disabled: false,
          allowClear: true
        },
        propConfigs: {
          placeholder: {
            type: 'string',
            label: '占位符文本',
            placeholder: '请输入占位符'
          },
          format: {
            type: 'string',
            label: '时间格式',
            placeholder: '如: HH:mm:ss'
          },
          disabled: {
            type: 'boolean',
            label: '禁用状态'
          },
          allowClear: {
            type: 'boolean',
            label: '允许清除'
          }
        },
        defaultStyle: {
          width: '200px',
          height: '32px'
        },
        description: '时间选择器'
      }
    ]
  },
  {
    id: 'display',
    name: '数据展示类',
    components: [
      {
        type: 'tag',
        name: '标签',
        icon: '🏷️',
        defaultProps: {
          text: '标签',
          color: 'default',
          closable: false
        },
        propConfigs: {
          text: {
            type: 'string',
            label: '标签文本',
            placeholder: '请输入标签文本'
          },
          color: {
            type: 'select',
            label: '标签颜色',
            options: [
              { label: '默认', value: 'default' },
              { label: '蓝色', value: 'blue' },
              { label: '绿色', value: 'green' },
              { label: '红色', value: 'red' },
              { label: '橙色', value: 'orange' },
              { label: '紫色', value: 'purple' }
            ]
          },
          closable: {
            type: 'boolean',
            label: '可关闭'
          }
        },
        defaultStyle: {
          display: 'inline-block'
        },
        description: '标签组件'
      },
      {
        type: 'badge',
        name: '徽标',
        icon: '🟢',
        defaultProps: {
          count: 1,
          text: '内容',
          showZero: false,
          dot: false
        },
        propConfigs: {
          count: {
            type: 'number',
            label: '徽标数量',
            min: 0
          },
          text: {
            type: 'string',
            label: '内容文本',
            placeholder: '请输入内容'
          },
          showZero: {
            type: 'boolean',
            label: '显示零'
          },
          dot: {
            type: 'boolean',
            label: '小圆点样式'
          }
        },
        defaultStyle: {
          display: 'inline-block'
        },
        description: '徽标组件'
      },
      {
        type: 'progress',
        name: '进度条',
        icon: '📏',
        defaultProps: {
          percent: 30,
          type: 'line',
          size: 'default',
          showInfo: true,
          status: 'normal'
        },
        propConfigs: {
          percent: {
            type: 'number',
            label: '进度百分比',
            min: 0,
            max: 100
          },
          type: {
            type: 'select',
            label: '进度条类型',
            options: [
              { label: '线形', value: 'line' },
              { label: '环形', value: 'circle' }
            ]
          },
          size: {
            type: 'select',
            label: '进度条大小',
            options: [
              { label: '小', value: 'small' },
              { label: '默认', value: 'default' }
            ]
          },
          showInfo: {
            type: 'boolean',
            label: '显示进度数值'
          },
          status: {
            type: 'select',
            label: '状态',
            options: [
              { label: '正常', value: 'normal' },
              { label: '成功', value: 'success' },
              { label: '异常', value: 'exception' }
            ]
          }
        },
        defaultStyle: {
          width: '200px'
        },
        description: '进度条组件'
      },
      {
        type: 'alert',
        name: '警告提示',
        icon: '⚠️',
        defaultProps: {
          message: '警告内容',
          type: 'info',
          showIcon: true,
          closable: false,
          description: ''
        },
        propConfigs: {
          message: {
            type: 'string',
            label: '警告标题',
            placeholder: '请输入警告标题'
          },
          type: {
            type: 'select',
            label: '警告类型',
            options: [
              { label: '信息', value: 'info' },
              { label: '成功', value: 'success' },
              { label: '警告', value: 'warning' },
              { label: '错误', value: 'error' }
            ]
          },
          description: {
            type: 'textarea',
            label: '警告描述',
            placeholder: '请输入警告描述',
            rows: 2
          },
          showIcon: {
            type: 'boolean',
            label: '显示图标'
          },
          closable: {
            type: 'boolean',
            label: '可关闭'
          }
        },
        defaultStyle: {
          width: '300px'
        },
        description: '警告提示组件'
      }
    ]
  }
]

// 根据类型获取组件模板
export const getComponentTemplate = (type: string) => {
  for (const category of componentCategories) {
    const template = category.components.find(comp => comp.type === type)
    if (template) {
      return template
    }
  }
  return null
}
